<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../css/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../css/themes/icon.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="../js/xheditor-1.2.2/xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="../js/xheditor-1.2.2/xheditor_lang/zh-cn.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.19.4/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.19.4/locale/zh-cn.js"></script>

</head>
<body>

        <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'west',split:true" title="新闻分类" style="width:200px;">
                        <ul id="tt"></ul>

                </div>
                <div data-options="region:'center',title:'新闻内容',iconCls:'icon-ok'">
                        <table id="dg"></table>


                        <div id="tb" style="padding:2px 5px;">
                            <input id="name" label="用户名称:" style="width:100%;">

                            <a href="#" id="searchData" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
                            <a href="#" id="addData" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
                            <a href="#" id="removesData" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
                        </div>

                        <div id="dlg" class="easyui-dialog" title="新闻增改" data-options="iconCls:'icon-save',closed: true" style="width:650px;height:400px;padding:40px">



                            <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                                <input   name="_id" style="width:100%; display: none" value="">


                            <div style="margin-bottom:20px;margin-top: 10px">
                                <input class="easyui-textbox" name="title" style="width:98%" data-options="label:'标题:',required:true">
                            </div>
                            <div style="margin-bottom:20px">
                                内容：<textarea  name="content" class="xheditor"></textarea>
                            </div>
                            <div style="margin-bottom:20px">
                                <input class="easyui-textbox"  name="autor" style="width:70%" data-options="label:'作者:',required:true">
                            </div>
                            <div style="margin-bottom:20px">
                                <input class="easyui-datebox"  name="releasetime" style="width:70%" data-options="label:'发布时间:',required:true">
                            </div>
                            <div style="margin-bottom:20px">
                                <input class="easyui-textbox"  name="keyword" style="width:90%" data-options="label:'关键字:',required:true">
                            </div>
                        </form>
                                        <div style="text-align:center;padding:5px 0">
                                            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
                                            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">重置</a>
                                        </div>





                        </div>
                </div>
            </div>



</body>
</html>

<script>
 var newsId = '';
 $('#tt').tree({
        url:`${window.parent.globalURL}cate/list/1`,
        onClick:function(node){
            $('#dg').datagrid({
                queryParams: {
                    newsId: node._id
                }
            });
        },
        onClick:function(node){
            newsId=node._id;
            $('#dg').datagrid({
                queryParams: {
                    newsId: node._id
                }
            });
        }
});

 function submitForm(){
    $('#ff').form('submit',{
        onSubmit:function(){
           if($(this).form('enableValidation').form('validate')){
                // 将当前页面的表单信息进行获取，然后进行ajax请求
                var formData = $("#ff").serializeJSON();
                console.log(formData._id.length);
                if(formData._id.length > 0){
                    // update
                    $.ajax({
                        url:`${window.parent.globalURL}news/${formData._id}`,
                        type:'put',
                        data: formData
                    }).done(function(res){
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                        $('#ff').form('clear');
                    })
                }else{
                    // add
                    console.log(newsId);

                    delete formData._id;
                    formData.newsId=newsId;
                    $.ajax({
                        url:`${window.parent.globalURL}news`,
                        type:'post',
                        data: formData
                    }).done(function(res){
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                        $('#ff').form('clear');
                    })

                }
           }
            // 表单验证
        },

    });
    return false; // 阻止默认事件
}
function clearForm(){
    $('#ff').form('clear');
}


$('#dg').datagrid({
    url:`${window.parent.globalURL}news/list`,
    fit:'true',
    border:false,
    pagination:true,
    toolbar:'#tb',
    columns:[[
        {field:'ck',checkbox:true},
        {field:'title',title:'新闻标题',width:290},
        {field:'autor',title:'新闻作者',width:140},
        {field:'releasetime',title:'发布时间',width:150,
        formatter: function(value,row,index){
                    return moment(row.releasetime).format('LL')
                }
        },
        {field:'keyword',title:'关键字',width:120},

        {field:'_id',title:'操作', width:110,
            formatter: function(value,row,index){
				return `<a href="javascript:void(0)" onclick="updateData('${row._id}')">修改</a> <a href="javascript:void(0)" onclick="deleteData('${row._id}')">删除</a>`
			}
		}
    ]]
});

function deleteData(id){

    $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){

            $.ajax({
                url:`${window.parent.globalURL}news/${id}`,
                type:'delete'
            }).done(function(res){
                $("#dg").datagrid('reload');
            })
        }
    });

}

function updateData(id){

    $.ajax({
        url:`${window.parent.globalURL}news/${id}`,
        type:'get'
    }).done(function(res){
        $('#ff').form('load',res);
        $('#dlg').dialog('open');
    })

}

function deleteDatas(){
  var rows = $('#dg').datagrid('getSelections');
  var ids = [];
  for(var i=0;i<rows.length;i++){
    ids.push(rows[i]._id);
  }

  $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){
            $.ajax({
                url:`${window.parent.globalURL}news/removes`,
                type:'post',
                data:{
                    ids: ids.toString()
                }
            }).done(function(res){
                $("#dg").datagrid('reload');
            })
        }
    });


}

$("#searchData").click(function(){
    $('#dg').datagrid({
        queryParams: {
            title: $("#name").val()
        }
    });
})


$("#addData").click(function(){
    $('#dlg').dialog('open');
})

$("#removesData").click(function(){
    deleteDatas();
})

$(function() {
        $('#dg').datagrid({
            title: '测试表格',
            pagination: true, //显示分页工具栏
        });
        var p = $('#dg').datagrid('getPager');
        $(p).pagination({
            pageSize: 10, //每页显示的记录条数，默认为10
            pageList: [5, 10, 15], //可以设置每页记录条数的列表
            beforePageText: '第', //页数文本框前显示的汉字
            afterPageText: '页    共 {pages} 页',
            displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
        });
    });

</script>